﻿@using System.Security.Claims
@using bpms.Enums
@{
    // 定义 userInfo 对象
    var userInfo = new
    {
        IsAuthenticated = User.Identity.IsAuthenticated,
        UserType = -1,
        UserId = -1,
        Name = ""
    };

    if (userInfo.IsAuthenticated)
    {
        var userType = -1;
        // 解析 UserType
        var userTypeClaim = User.FindFirst("UserType");
        if (userTypeClaim != null && int.TryParse(userTypeClaim.Value, out int parsedType))
        {
            userType = parsedType;
        }

        // 解析 UserId
        var userIdClaim = User.FindFirst(ClaimTypes.NameIdentifier);
        int userId = userIdClaim != null ? int.Parse(userIdClaim.Value) : -1;

        // 更新 userInfo
        userInfo = new
        {
            IsAuthenticated = true,
            UserType = userType,
            UserId = userId,
            Name = User.Identity.Name
        };
    }
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - 饮品销售系统</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/wjs.styles.css" asp-append-version="true" />
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    @RenderSection("Styles", required: false)
    <style>
        :root {
        --sidebar-width: 250px;
        --sidebar-collapsed-width: 70px;
        --transition-speed: 0.3s;
        --footer-height: 60px;
        }

        body {
        display: flex;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        flex-direction: column;
        font-family: 'Microsoft YaHei', sans-serif;
        }

        /* 侧边栏样式 */
        .sidebar {
        width: var(--sidebar-width);
        min-height: 100vh;
        background-color: #2c3e50;
        color: white;
        transition: all var(--transition-speed) ease;
        position: fixed;
        z-index: 1000;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        }

        .sidebar.collapsed {
        width: var(--sidebar-collapsed-width);
        }

        .sidebar-header {
        padding: 1rem;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .sidebar-header h3 {
        margin: 0;
        font-size: 1.2rem;
        white-space: nowrap;
        transition: all var(--transition-speed);
        }

        .sidebar-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        }

        .sidebar-menu li {
        position: relative;
        }

        .sidebar-menu li a {
        display: flex;
        align-items: center;
        padding: 0.8rem 1rem;
        color: #ecf0f1;
        text-decoration: none;
        transition: all 0.2s;
        white-space: nowrap;
        }

        .sidebar-menu li a:hover {
        color: white;
        background-color: #34495e;
        }

        .sidebar-menu li a.active {
        color: white;
        background-color: #3498db;
        }

        .sidebar-menu li a i {
        margin-right: 10px;
        font-size: 1.2rem;
        min-width: 24px;
        text-align: center;
        transition: all var(--transition-speed);
        }

        /* 折叠状态下的样式 */
        .sidebar.collapsed .sidebar-menu li a span {
        opacity: 0;
        width: 0;
        height: 0;
        display: inline-block;
        overflow: hidden;
        }

        .sidebar.collapsed .sidebar-menu li a i {
        margin-right: 0;
        font-size: 1.4rem;
        }

        .sidebar.collapsed .sidebar-header h3 {
        opacity: 0;
        width: 0;
        height: 0;
        display: inline-block;
        overflow: hidden;
        }

        /* 主内容区域 */
        .main-content {
        flex: 1;
        margin-left: var(--sidebar-width);
        transition: margin-left var(--transition-speed);
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        }

        .main-content.collapsed {
        margin-left: var(--sidebar-collapsed-width);
        }

        /* 内容包装器 - 实现悬停滚动 */
        .content-wrapper {
        flex: 1;
        overflow-y: hidden;
        padding-bottom: var(--footer-height);
        }

        .content-wrapper:hover {
        overflow-y: auto;
        }

        /* 自定义滚动条 */
        .content-wrapper::-webkit-scrollbar {
        width: 8px;
        }

        .content-wrapper::-webkit-scrollbar-track {
        background: #f8f9fa;
        border-radius: 4px;
        }

        .content-wrapper::-webkit-scrollbar-thumb {
        background: #adb5bd;
        border-radius: 4px;
        }

        .content-wrapper::-webkit-scrollbar-thumb:hover {
        background: #6c757d;
        }

        /* 顶部导航栏 */
        .top-navbar {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 900;
        }

        /* 底部固定 */
        .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: var(--footer-height);
        background-color: white;
        border-top: 1px solid #dee2e6;
        display: flex;
        align-items: center;
        z-index: 800;
        }

        /* 切换按钮 */
        .toggle-btn {
        position: absolute;
        right: -15px;
        top: 20px;
        background-color: #2c3e50;
        color: white;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        z-index: 1001;
        transition: all 0.2s;
        }

        .toggle-btn:hover {
        background-color: #34495e;
        transform: scale(1.1);
        }

        /* 响应式设计 */
        @@media (max-width: 768px) {
        .sidebar {
        width: var(--sidebar-collapsed-width);
        }

        .sidebar:not(.collapsed) {
        width: var(--sidebar-width);
        z-index: 1100;
        }

        .main-content {
        margin-left: var(--sidebar-collapsed-width);
        }

        .main-content:not(.collapsed) {
        margin-left: var(--sidebar-width);
        }

        .toggle-btn {
        right: -12px;
        top: 15px;
        }
        }

        /* 内容区域防止被footer遮挡 */
        .main-container {
        padding-bottom: calc(var(--footer-height) + 20px);
        }
    </style>
</head>
<body>
    <!-- 左侧菜单 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>饮品销售系统</h3>
        </div>
        <ul class="sidebar-menu">
            @if (userInfo.UserType == (int)UserType.Admin)
            {
                <li>
                    <a asp-area="" asp-controller="Customer" asp-action="Index">
                        <i class="bi bi-people"></i>
                        <span>买家管理</span>
                    </a>
                </li>
            }
            <li>
                <a asp-area="" asp-controller="Product" asp-action="Index">
                    <i class="bi bi-cup-straw"></i>
                    <span>饮品管理</span>
                </a>
            </li>
            <li>
                <a asp-area="" asp-controller="Order" asp-action="Index">
                    <i class="bi bi-receipt"></i>
                    <span>订单管理</span>
                </a>
            </li>
            @if (userInfo.UserType == (int)UserType.Admin)
            {
                <li>
                    <a asp-area="" asp-controller="BackupDBLog" asp-action="Index">
                    <i class="bi bi-archive"></i>
                    <span>数据备份/还原</span>
                </a>
            </li>
            }
        </ul>
        <button class="toggle-btn" id="toggleBtn">
            <i class="bi bi-chevron-left" id="toggleIcon"></i>
        </button>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content" id="mainContent">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand navbar-dark bg-primary top-navbar">
            <div class="container-fluid">
                <div class="d-flex align-items-center ms-auto">
                    <span class="navbar-text me-3">
                        <i class="bi bi-person-circle me-2"></i>欢迎  @userInfo.Name
                    </span>
                    <div class="d-flex">
                        @if (userInfo.UserType == (int)UserType.Admin)
                        {
                            <a asp-controller="AdminUser" asp-action="Edit" asp-route-id="@userInfo.UserId" class="nav-link text-white me-2" title="修改信息">
                                <i class="bi bi-pencil-square"></i>
                                <span class="d-none d-md-inline">修改</span>
                            </a>
                        }
                        else
                        {
                            <a asp-controller="Customer" asp-action="Edit" asp-route-id="@userInfo.UserId" class="nav-link text-white me-2" title="修改信息">
                                <i class="bi bi-pencil-square"></i>
                                <span class="d-none d-md-inline">修改</span>
                            </a>
                        }
                       
                        <form asp-controller="Account" asp-action="Logout" method="post">
                            @Html.AntiForgeryToken()
                            <button type="submit" class="nav-link text-white bg-transparent border-0" title="退出登录">
                                <i class="bi bi-box-arrow-right"></i>
                                <span class="d-none d-md-inline">退出</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 内容区域 -->
        <div class="content-wrapper">
            <div class="container-fluid main-container mt-3">
                <main role="main">
                    @RenderBody()
                </main>
            </div>
        </div>

        <!-- 底部固定 -->
        <footer class="footer">
            <div class="container">
                <span class="text-muted">&copy; 2025 饮品销售系统 - 版权所有</span>
            </div>
        </footer>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script>
        $(document).ready(function () {
            // 侧边栏折叠/展开功能
            $('#toggleBtn').click(function () {
                $('#sidebar').toggleClass('collapsed');
                $('#mainContent').toggleClass('collapsed');

                // 切换图标方向
                if ($('#sidebar').hasClass('collapsed')) {
                    $('#toggleIcon').removeClass('bi-chevron-left').addClass('bi-chevron-right');
                } else {
                    $('#toggleIcon').removeClass('bi-chevron-right').addClass('bi-chevron-left');
                }

                // 保存状态到localStorage
                localStorage.setItem('sidebarCollapsed', $('#sidebar').hasClass('collapsed'));
            });

            // 高亮当前活动菜单项
            var currentUrl = window.location.pathname;
            $('.sidebar-menu li a').each(function () {
                var linkUrl = $(this).attr('href');
                if (currentUrl === linkUrl) {
                    $(this).addClass('active');
                }
            });

            // 从localStorage读取折叠状态
            var isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
            if (isCollapsed) {
                $('#sidebar').addClass('collapsed');
                $('#mainContent').addClass('collapsed');
                $('#toggleIcon').removeClass('bi-chevron-left').addClass('bi-chevron-right');
            }

            // 移动设备下默认折叠
            if ($(window).width() <= 768) {
                $('#sidebar').addClass('collapsed');
                $('#mainContent').addClass('collapsed');
                $('#toggleIcon').removeClass('bi-chevron-left').addClass('bi-chevron-right');
            }
        });
    </script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>